<template>
	<view>
		<TopNav title="池塘清淤"></TopNav>
		<view class="padding-bottom">
			<view class=" padding bg-white">
				<view class="text-sl text-bold text-blue">{{form.culturePondName || "-"}}</view>
				<view class="text-gray">
					{{form.time || "-"}}
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title">
					<text class="text-lg text-bold text-blue">基本信息</text>
					<text class="bg-blue"></text>
				</view>
			</view>
			<van-cell-group class="padding-lr-sm">
				<van-cell title="天气" :value="form.weather || '-'" />
			</van-cell-group>
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title">
					<text class="text-lg text-bold text-blue">清淤情况</text>
					<text class="bg-blue"></text>
				</view>
			</view>
			<van-cell-group class="padding-lr-sm">
				<van-cell title="清淤方法" :value="form.clearanceWayName || '-'" />
				<van-cell title="清淤面积" :value="form.clearanceArea || '-' + '亩'" />

			</van-cell-group>
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title">
					<text class="text-lg text-bold text-blue">消毒情况</text>
					<text class="bg-blue"></text>
				</view>
			</view>
			<van-cell-group class="padding-lr-sm">
				<van-cell title="消毒时间" :value="form.disinfectTime || '-'" />
				<van-cell title="消毒方法" :value="form.disinfectWayName || '-' + '亩'" />
				<van-cell title="消毒用药" :value="form.medicineName || '-'" />
				<van-cell title="用药量" :value="`${form.medicationUsage || '-'} ${form.medicationUsageUnit}`">
					<view slot="label">
						<view>
							<text>规格：</text>
							<text class="text-orange">{{form.medicineSpecifications}}{{form.medicineSpecificationsUnitDictName}}</text>
						</view>
					</view>
				</van-cell>
				<van-cell title="生产厂家" :value="form.medicineManufacturer || '-'" />

			</van-cell-group>
			<view class=" padding bg-white margin-top flex">
				<view class="padding-right">
					<image :src="baseUrl + form.createUserAvatar" mode="" class="cu-avatar lg radius bg-gray"></image>
				</view>
				<view class="">
					<view class="text-xl text-bold text-blue">{{form.createUsername || "-"}}</view>
					<view class="text-gray">
						{{form.createTime || "-"}} 记录
					</view>
				</view>

			</view>
			<van-cell-group class="margin-top" v-if="form.remarks">
				<van-cell title="备注" :value="form.remarks || '-'" />
			</van-cell-group>
			<view v-if="form.fileUrls">
				<view class="cu-bar bg-white margin-top">
					<view class="action sub-title">
						<text class="text-lg text-bold text-blue">相关照片</text>
						<text class="bg-blue"></text>
					</view>
				</view>
				<view class="padding bg-white">
					<view class="grid flex-sub padding-lr col-2 grid-square">
						<view class="bg-img" :style="'background-image: url(' + src + '); height: 120px; padding: 0'"
							v-for="(src, index) in getImages(form.fileUrls)" :key="index"></view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		detail,
	} from "@/api/work/desilt"
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.config.baseUrl,
				queryParams: {
					id: undefined
				},
				form: {}
			}
		},
		onLoad(query) {
			if (query.id) {
				this.queryParams.id = query.id
				this.getDetail()
			}
		},
		methods: {
			getDetail() {
				detail(this.queryParams).then(res => {
					this.form = res.data
				})
			},
			getImages(files) {
				if (!files) return
				const list = files.split(',').map(url => this.baseUrl + url);
				return list;
			},
		}
	}
</script>

<style>

</style>